<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">菜单管理</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">系统管理</a>
          <a><cite>菜单管理</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            <button id="btn-expand-fold" n='1' class="layui-btn icon-btn"><i class="layui-icon">&#xe623;</i>关闭全部</button>
            <button id="btn-menu-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
        </div>

        <table class="layui-table" id="menu-table" lay-filter="menu-table"></table>
    </div>
</div>


<!-- 表格操作列 -->
<script type="text/html" id="menu-table-bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="reset">重置密码</a>
</script>

<!-- 表格状态列 -->
<script type="text/html" id="menu-tpl-state">
    <input type="checkbox" lay-filter="menu-tpl-state" value="{{d.menuId}}" lay-skin="switch" lay-text="正常|锁定"
           {{d.state==0?'checked':''}}/>
</script>

<script>
    layui.use(['form', 'table', 'util', 'config', 'admin','treetable'], function () {
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;
        var treetable = layui.treetable;

        var Index = {
                treeLoad : function(){
                    treetable.render({
                    treeColIndex: 1,
                    treeSpid: 0,
                    treeIdName: 'id',
                    treePidName: 'id_parent',
                    elem: '#menu-table',
                    url: 'http://localhost/service-system/Menus',
                    height:'full-300',
                    cols: [[
                        {type: 'numbers'},
                        {field: 'id', title: 'ID'},
                        {field: 'id_parent', title: 'ID_PARENT'},
                        {field: 'name',title: '名称'},
                        {field: 'path',title: '路径'},
                        {field: 'auth',title: '权限'},
                        {field: 'url', title: '链接'},
                        {field: 'icon', title: '图标'},
                        {field: 'tt',title:'操作',templet:function(d){
                            var html ='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>';
                                html +='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                            return html;
                        }}
                    ]]
                });

                    // 工具条点击事件
                    table.on('tool(menu-table)', function (obj) {
                            var event = obj.event;
                            if(event === 'edit'){
                                Index.showEditModel(obj.data);
                            }else if(event === 'del'){

                            }
                    });
            },

                // 显示表单弹窗
                showEditModel:function(data) {
                    admin.putTempData('t_menu', data);
                   // admin.putTempData('formOk', false);
                    var title = data ? '修改菜单' : '添加菜单';
                    admin.popupCenter({
                        title: title,
                        path: 'components/system/menu_form.html',
                        end: function () {
                            Index.treeLoad();
                        }
                    });
            }

        };
        
        Index.treeLoad();
       
        $("#btn-menu-add").click(function(){
            Index.showEditModel();
        });
        $('#btn-expand-fold').click(function () {
            var $that = $(this);
            var n = $(this).attr('n');
            if(n=='0'){
                treetable.expandAll('#menu-table');
                $(this).attr('n','1');
                $(this).html('<i class="layui-icon">&#xe623;</i>关闭全部')
            }else  {
                treetable.foldAll('#menu-table');
                $(this).attr('n','0');
                $(this).html('<i class="layui-icon">&#xe625;</i>展开全部')
            }
        });
    });
</script>